<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <style>
      .login {
        padding: 30px 20px;
        margin-top: 200px;
        border: 1px solid #999;
        background-color: #eee;
        box-shadow: 5px 5px 10px #999;
      }

      .login h3 {
        text-align: center;
        margin: -10px 0 20px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6 login">
          <h3>中会科技请你登录</h3>
          <form action="">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">用户名：</span>
              </div>
              <input
                type="text"
                class="form-control"
                name="username"
                placeholder="请输
入您的账号"
                aria-label="Username"
                aria-describedby="basic-addon1"
              />
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text"
                  >密&nbsp;&nbsp;&nbsp; &nbsp; 码：</span
                >
              </div>
              <input
                type="password"
                class="form-control"
                name="password"
                placeholder="请输入密码"
                aria-label="Username"
                aria-describedby="basic-addon1"
              />
            </div>

            <input
              type="button"
              id="btnLogin"
              value=" 登 录 "
              class="btn btn-primary form-control"
            />
          </form>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $("#btnLogin").click(function () {
        $.ajax({
          type: "post",
          url: "/login",
          data: $("form").serialize(),
        }).then(function (res) {
          if (res.msg == "ok") {
            location.href = "./index.html";
          } else {
            alert("你输入的账号或密码错误，请重新输入！");
            $("input[name=username]").val("");
            $("input[name=password]").val("");
            $("input[name=username]").focus();
          }
        });
      });
    </script>
  </body>
</html>
